'use client';

import { useRouter } from 'next/navigation';
import React, { useState, useEffect } from 'react';
import { Card, Row, Col, Typography, Tag, Input, Empty, Divider, Image } from 'antd';
import { SearchOutlined, FireOutlined, FileImageOutlined, PictureOutlined, ToolOutlined, StarOutlined, EyeOutlined, HeartOutlined } from '@ant-design/icons';
import AdminLayout from './AdminLayout';

const { Title, Paragraph, Text } = Typography;
const { Search } = Input;

// 定义提示词类型
interface PromptCard {
  id: string;
  title: string;
  description: string;
  category: string;
  subcategory: string;
  imageUrl: string;
  isPopular?: boolean;
}

interface TemplateItem {
  id: string;
  name: string;
  description: string;
  image: string;
}

const PromptPlaza: React.FC = () => {
  const [searchText, setSearchText] = useState<string>('');
  const [filteredPrompts, setFilteredPrompts] = useState<PromptCard[]>([]);
  const [categories, setCategories] = useState<any[]>([]);  // 新增
  const [examplePrompts, setExamplePrompts] = useState<PromptCard[]>([]);  // 新增
  const [isLoading, setIsLoading] = useState<boolean>(true);  // 新增
  const [templateData, setTemplateData] = useState<any>(null);  // 新增: 缓存原始 JSON 数据
  const router = useRouter();

  useEffect(() => {
    fetch('/api/license/status').then(async (res) => {
      const result = await res.json();
      if (result.status !== 200) {
        router.push('/');
      }
    }).catch(() => {
      router.push('/');
    });
  }, []);

  // 从 templates-db API 加载数据
  useEffect(() => {
    const loadTemplateData = async () => {
      try {
        const response = await fetch('/api/templates-db');
        if (!response.ok) {
          throw new Error('Failed to load template data');
        }
        const result = await response.json();
        
        if (!result.success) {
          throw new Error(result.error || 'API返回错误');
        }

        const templates = result.data || [];
        
        // 按类型分组数据
        const txt2imgTemplates = templates.filter((t: any) => t.type === 'txt2img');
        const img2imgTemplates = templates.filter((t: any) => t.type === 'img2img');
        const postprocessTemplates = templates.filter((t: any) => t.type === 'postprocess');
        
        // 构造与原来相同的数据结构
        const data = {
          txt2img: txt2imgTemplates,
          img2img: img2imgTemplates,
          postprocess: postprocessTemplates
        };
        setTemplateData(data);

        // 生成 categories
        const newCategories = [
          {
            key: 'text-to-image',
            name: '文生图',
            subcategories: txt2imgTemplates.map((item: any) => ({
              key: item.id,
              name: item.name
            }))
          },
          {
            key: 'image-to-image',
            name: '图生图',
            subcategories: img2imgTemplates.map((item: any) => ({
              key: item.id,
              name: item.name
            }))
          },
          {
            key: 'post-processing',
            name: '后期处理',
            subcategories: postprocessTemplates.map((item: any) => ({
              key: item.id,
              name: item.name
            }))
          }
        ];
        setCategories(newCategories);

        // 生成 examplePrompts (转换所有部分为 PromptCard)
        const convertToPromptCard = (item: any, category: string) => ({
          id: item.id,
          title: item.name,
          description: item.description,
          category: category,
          subcategory: item.name,
          imageUrl: item.image,
          isPopular: false  // 可根据需要设置
        });

        const txt2imgCards = txt2imgTemplates.map((item: any) => convertToPromptCard(item, 'text-to-image'));
        const img2imgCards = img2imgTemplates.map((item: any) => convertToPromptCard(item, 'image-to-image'));
        const postprocessCards = postprocessTemplates.map((item: any) => convertToPromptCard(item, 'post-processing'));

        const allPrompts = [...txt2imgCards, ...img2imgCards, ...postprocessCards];
        setExamplePrompts(allPrompts);

        // 更新 filteredPrompts
        setFilteredPrompts(allPrompts);
      } catch (error) {
        console.error('加载模板数据失败:', error);
        // 使用默认数据 (可选)
      } finally {
        setIsLoading(false);
      }
    };
    loadTemplateData();
  }, []);
  
  // 筛选逻辑
  useEffect(() => {
    let filtered = [...examplePrompts];
    
    // 按搜索文本筛选
    if (searchText) {
      const lowerSearchText = searchText.toLowerCase();
      filtered = filtered.filter(
        item => 
          item.title.toLowerCase().includes(lowerSearchText) || 
          item.description.toLowerCase().includes(lowerSearchText)
      );
    }
    
    setFilteredPrompts(filtered);
  }, [searchText, examplePrompts]);
  
  // 渲染提示词卡片
  const renderPromptCard = (item: PromptCard) => (
    <Col xs={24} sm={12} md={8} lg={6} xl={4} key={item.id}>
      <Card
        hoverable
        className="prompt-card"
        cover={
          <div className="card-image-container">
            <div 
              className="card-background-image" 
              style={{ backgroundImage: `url(${item.imageUrl})` }}
            ></div>
            {/* <div className="card-overlay">
              <div className="card-actions">
                <div className="action-button">
                  <EyeOutlined />
                </div>
                <div className="action-button">
                  <HeartOutlined />
                </div>
                <div className="action-button">
                  <StarOutlined />
                </div>
              </div>
            </div>
            {item.isPopular && (
              <div className="popular-badge">
                <FireOutlined /> 热门
              </div>
            )} */}
          </div>
        }
        styles={{ body: { padding: '16px' } }}
        onClick={() => {
          pushToSubcategory(item.category, item.id);
        }}
      >
        <div className="card-content">
          <div className="card-header">
            <Title level={5} className="card-title" ellipsis={{ rows: 1 }}>
              {item.title}
            </Title>
            {/* <div className="card-category">
              <Tag color="geekblue" className="category-tag">
                {item.subcategory}
              </Tag>
            </div> */}
          </div>
          <Paragraph className="card-description" ellipsis={{ rows: 2 }}>
            {item.description}
          </Paragraph>
          {/* <div className="card-footer">
            <Text className="prompt-preview" ellipsis>
              {item.prompt}
            </Text>
          </div> */}
        </div>
      </Card>
    </Col>
  );

  const pushToSubcategory = (category: string, subcategory: string) => {
    if (templateData) {
      let section: TemplateItem[];
      switch (category) {
        case 'text-to-image':
          section = templateData.txt2img;
          break;
        case 'image-to-image':
          section = templateData.img2img;
          break;
        case 'post-processing':
          section = templateData.postprocess;
          break;
        default:
          return;
      }
      const selectedItem = section.find((i: TemplateItem) => i.id === subcategory);
      if (selectedItem) {
        const queryData = encodeURIComponent(JSON.stringify(selectedItem));
        router.push(`/admin/${category}?data=${queryData}`);
      }
    }
  }

  return (
    <AdminLayout pageTitle="提示词广场">
      <div className="prompt-plaza">
        {/* 页面标题和描述 */}
        <div className="page-header">
          <div className="header-content">
            <div className="title-section">
              <Title level={1} className="page-title">
                <FireOutlined className="title-icon" />
                提示词广场
              </Title>
              <Paragraph className="page-description">
                发现和使用高质量的AI绘画提示词模板，让创作更简单高效
              </Paragraph>
            </div>
            <div className="stats-section">
              <div className="stat-item">
                <Text className="stat-number">{examplePrompts.length}</Text>
                <Text className="stat-label">提示词模板</Text>
              </div>
              <div className="stat-item">
                <Text className="stat-number">{categories.length}</Text>
                <Text className="stat-label">功能分类</Text>
              </div>
              <div className="stat-item">
                <Text className="stat-number">{examplePrompts.filter(p => p.isPopular).length}</Text>
                <Text className="stat-label">热门模板</Text>
              </div>
            </div>
          </div>
        </div>

        {/* 搜索栏 */}
        <div className="search-section">
          <div className="search-container">
            
            <Search
              placeholder="搜索提示词模板、描述或关键词..."
              allowClear
              enterButton="搜 索"
              size="large"
              onSearch={setSearchText}
              className="custom-search-input"
              prefix={<SearchOutlined className="search-icon-left" />}
            />
            <div className="search-tips">
              <Text className="search-tip-text">
                💡 试试搜索：写实人像、古风插画、动漫风格、照片修复
              </Text>
            </div>
          </div>
        </div>
        
        {/* 分类标签区域 */}
        <div className="category-section">
          {/* <div className="category-header">
            <Title level={3} className="category-title">功能分类</Title>
            <Text className="category-subtitle">选择你感兴趣的AI功能类型</Text>
          </div> */}
          <div className="category-cards">
            {categories.map(category => (
              <Card 
                key={category.key} 
                className="category-card" 
                hoverable
                data-category={category.key}
                onClick={() => {
                  console.log(`点击了分类: ${category.key}, 跳转到 /admin/${category.key}`);  // 新增: 调试日志，检查事件是否触发
                  router.push(`/admin/${category.key}`);
                }}
              >
                <div className="category-card-header">
                  <div className="category-icon">
                    {category.key === 'text-to-image' && <FileImageOutlined />}
                    {category.key === 'image-to-image' && <PictureOutlined />}
                    {category.key === 'post-processing' && <ToolOutlined />}
                  </div>
                  <div className="category-info">
                    <Text className="category-name">{category.name}</Text>
                    <Text className="category-count">{category.subcategories.length} 个子分类</Text>
                  </div>
                </div>
                <div className="category-tags">
                  {category.subcategories.map(subcategory => (
                    <Tag
                      key={subcategory.key}
                      className="subcategory-tag"
                      color="processing"
                      onClick={(e) => {
                        e.stopPropagation();
                        console.log(`点击了子分类: ${subcategory.key}, 跳转到 /admin/${category.key}`);  // 新增: 调试日志，检查事件是否触发
                        pushToSubcategory(category.key, subcategory.key);
                      }}
                      style={{ cursor: 'pointer' }}  // 新增: 确保鼠标指针为手型，提高可点击性
                    >
                      {subcategory.name}
                    </Tag>
                  ))}
                </div>
              </Card>
            ))}
          </div>
        </div>
        

        
        {/* 提示词卡片列表 */}
        <div className="prompt-cards-section">
          <div className="section-header">
            <div className="header-left">
              <Title level={3} className="section-title">
                精选模板
                <span className="title-decoration"></span>
              </Title>
              <Text className="section-subtitle">
                {searchText ? `搜索结果：${filteredPrompts.length} 个模板` : `共 ${filteredPrompts.length} 个精心挑选的提示词模板`}
              </Text>
            </div>
            <div className="header-right">
              {filteredPrompts.filter(p => p.isPopular).length > 0 && (
                <Tag icon={<FireOutlined />} color="volcano" className="hot-tag">
                  {filteredPrompts.filter(p => p.isPopular).length} 个热门
                </Tag>
              )}
            </div>
          </div>
          
          <Row gutter={[20, 24]} className="prompt-cards">
            {filteredPrompts.length > 0 ? (
              filteredPrompts.map(renderPromptCard)
            ) : (
              <Col span={24}>
                <Empty 
                  description={
                    <div className="empty-content">
                      <Text className="empty-title">没有找到匹配的模板</Text>
                      <Text className="empty-subtitle">尝试调整搜索关键词或浏览其他分类</Text>
                    </div>
                  }
                  className="empty-result"
                />
              </Col>
            )}
          </Row>
        </div>
      </div>
      
      <style jsx global>{`
        .prompt-plaza {
          padding: 0;
          background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
          min-height: 100vh;
        }

        /* 页面头部 */
        .page-header {
          background: #1a1a1a !important;
          border-radius: 16px;
          padding: 40px;
          margin-bottom: 32px;
          border: 1px solid #333;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
          position: relative;
          overflow: hidden;
        }

        .page-header::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('/text-img/xs.png');
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 0.15;
          z-index: 1;
        }

        .page-header::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(90deg, #00ff00, #00cc00, #009900);
          z-index: 3;
        }

        .header-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 40px;
          position: relative;
          z-index: 2;
        }

        .title-section {
          flex: 1;
        }

        .page-title {
          margin: 0 !important;
          color: #fff !important;
          font-size: 32px !important;
          font-weight: 600 !important;
          display: flex !important;
          align-items: center !important;
          gap: 16px !important;
          margin-bottom: 16px !important;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          letter-spacing: 0.5px;
        }

        .title-icon {
          color: #00ff00;
          font-size: 40px;
          text-shadow: 0 2px 4px rgba(0, 255, 0, 0.3);
        }

        .page-description {
          color: #ccc !important;
          font-size: 15px !important;
          margin: 0 !important;
          line-height: 1.6 !important;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
          letter-spacing: 0.3px;
        }

        .stats-section {
          display: flex;
          gap: 32px;
          position: relative;
          z-index: 2;
        }

        .stat-item {
          text-align: center;
          padding: 20px;
          background: rgba(0, 255, 0, 0.1);
          border-radius: 12px;
          border: 1px solid rgba(0, 255, 0, 0.2);
          min-width: 120px;
          backdrop-filter: blur(10px);
          position: relative;
          z-index: 2;
        }

        .stat-number {
          display: block !important;
          font-size: 24px !important;
          font-weight: 600 !important;
          color: #00ff00 !important;
          margin-bottom: 4px !important;
          text-shadow: 0 2px 4px rgba(0, 255, 0, 0.3);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .stat-label {
          color: #ccc !important;
          font-size: 13px !important;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* 搜索区域 */
        .search-section {
          margin-bottom: 48px;
          padding: 60px 0 80px 0;
          background: radial-gradient(ellipse at center, rgba(0, 255, 0, 0.08) 0%, transparent 70%);
          border-radius: 24px;
        }

        .search-container {
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
        }

        .search-tips {
          margin-top: 20px;
          opacity: 0.8;
          transition: opacity 0.3s ease;
        }

        .search-tips:hover {
          opacity: 1;
        }

        .search-tip-text {
          color: #888 !important;
          font-size: 13px !important;
          padding: 12px 20px !important;
          background: rgba(26, 26, 26, 0.6) !important;
          border-radius: 20px !important;
          border: 1px solid rgba(255, 255, 255, 0.1) !important;
          backdrop-filter: blur(10px) !important;
          display: inline-block !important;
          transition: all 0.3s ease !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .search-tip-text:hover {
          background: rgba(26, 26, 26, 0.8) !important;
          border-color: rgba(0, 255, 0, 0.3) !important;
          color: #aaa !important;
        }

        /* 分类区域 */
        .category-section {
          margin-bottom: 40px;
        }

        .category-header {
          text-align: center;
          margin-bottom: 24px;
        }

        .category-title {
          margin: 0 !important;
          color: #fff !important;
          font-size: 24px !important;
          font-weight: 600 !important;
          margin-bottom: 8px !important;
        }

        .category-subtitle {
          color: #ccc !important;
          font-size: 16px !important;
        }

        .category-cards {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 20px;
        }

        .category-card {
          background: #1a1a1a !important;
          border: 1px solid #333 !important;
          border-radius: 16px !important;
          transition: all 0.3s ease !important;
          overflow: hidden !important;
          position: relative !important;
        }

        .category-card::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-size: cover !important;
          background-position: center !important;
          background-repeat: no-repeat !important;
          opacity: 0.3;
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        .category-card:hover::before {
          opacity: 0.4;
        }

        .category-card:hover {
          transform: translateY(-8px) !important;
          box-shadow: 0 12px 32px rgba(0, 255, 0, 0.2) !important;
          border-color: #00ff00 !important;
        }

        .category-card-header {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 16px;
          position: relative;
          z-index: 2;
        }

        .category-icon {
          width: 48px;
          height: 48px;
          background: linear-gradient(135deg, #00ff00, #00cc00);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          font-size: 20px;
          position: relative;
          z-index: 2;
        }

        .category-info {
          flex: 1;
          position: relative;
          z-index: 2;
        }

        .category-name {
          display: block !important;
          color: #fff !important;
          font-size: 16px !important;
          font-weight: 500 !important;
          margin-bottom: 4px !important;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .category-count {
          color: #ccc !important;
          font-size: 13px !important;
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .category-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          position: relative;
          z-index: 2;
        }

        .subcategory-tag {
          background: rgba(0, 255, 0, 0.1) !important;
          border: 1px solid rgba(0, 255, 0, 0.3) !important;
          color: #00ff00 !important;
          border-radius: 8px !important;
          font-size: 11px !important;
          padding: 4px 8px !important;
          transition: all 0.2s ease !important;
          backdrop-filter: blur(10px);
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .subcategory-tag:hover {
          background: rgba(0, 255, 0, 0.2) !important;
          color: #00cc00 !important;
          transform: translateY(-1px) !important;
        }

        /* 文生图卡片背景 */
        .category-card[data-category="text-to-image"]::before {
          background-image: url('/text-img/xs.png') !important;
        }

        /* 图生图卡片背景 */
        .category-card[data-category="image-to-image"]::before {
          background-image: url('/img-img/xgdm.png') !important;
        }

        /* 后期处理卡片背景 */
        .category-card[data-category="post-processing"]::before {
          background-image: url('/postprocess/xsfd.png') !important;
        }

        /* 提示词卡片区域 */
        .prompt-cards-section {
          margin-top: 40px;
        }

        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24px;
          padding: 20px;
          background: rgba(26, 26, 26, 0.8);
          border-radius: 12px;
          border: 1px solid #333;
        }

        .header-left {
          flex: 1;
        }

        .section-title {
          margin: 0 !important;
          color: #fff !important;
          font-size: 20px !important;
          font-weight: 500 !important;
          margin-bottom: 8px !important;
          position: relative !important;
          display: inline-flex !important;
          align-items: center !important;
          gap: 12px !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .title-decoration {
          width: 4px;
          height: 24px;
          background: linear-gradient(135deg, #00ff00, #00cc00);
          border-radius: 2px;
        }

        .section-subtitle {
          color: #ccc !important;
          margin-left: 12px !important;
          font-size: 13px !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .header-right {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .hot-tag {
          background: linear-gradient(135deg, #00ff00, #00cc00) !important;
          border: none !important;
          color: #000000 !important;
          font-weight: 500 !important;
          padding: 8px 16px !important;
          border-radius: 20px !important;
        }

        /* 提示词卡片 */
        .prompt-cards {
          margin-top: 24px;
        }

        .prompt-card {
          height: 100% !important;
          background: #1a1a1a !important;
          border: 1px solid #333 !important;
          border-radius: 16px !important;
          overflow: hidden !important;
          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
          position: relative !important;
        }

        .prompt-card:hover {
          transform: translateY(-8px) scale(1.02) !important;
          box-shadow: 0 20px 40px rgba(0, 255, 0, 0.2) !important;
          border-color: #00ff00 !important;
        }

        .card-image-container {
          position: relative;
          height: 0;
          padding-bottom: 133.33%; /* 3:4 宽高比 (4/3 * 100%) */
          overflow: hidden;
          background: linear-gradient(135deg, #141414, #2a2a2a);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .card-background-image {
          position: absolute;
          width: 100%;
          height: 100%;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .prompt-card:hover .card-background-image {
          transform: scale(1.1);
        }

        .card-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .prompt-card:hover .card-overlay {
          opacity: 1;
        }

        .card-actions {
          display: flex;
          gap: 8px;
        }

        .action-button {
          width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.9);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #333;
          cursor: pointer;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
        }

        .action-button:hover {
          background: #00ff00;
          color: #000000;
          transform: scale(1.1);
        }

        .popular-badge {
          position: absolute;
          top: 8px;
          right: 8px;
          background: linear-gradient(135deg, #00ff00, #00cc00);
          color: #000000;
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 10px;
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 2px;
          box-shadow: 0 2px 8px rgba(0, 255, 0, 0.3);
          z-index: 2;
        }

        .card-content {
          padding: 12px;
        }

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;
        }

        .card-title {
          margin: 0 !important;
          color: #fff !important;
          font-size: 13px !important;
          font-weight: 500 !important;
          line-height: 1.3 !important;
          flex: 1 !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .card-category {
          margin-left: 8px;
        }

        .category-tag {
          background: rgba(0, 255, 0, 0.1) !important;
          border: 1px solid rgba(0, 255, 0, 0.3) !important;
          color: #00ff00 !important;
          border-radius: 8px !important;
          font-size: 10px !important;
          padding: 2px 6px !important;
          margin: 0 !important;
        }

        .card-description {
          color: #ccc !important;
          font-size: 11px !important;
          line-height: 1.4 !important;
          margin-bottom: 12px !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .card-footer {
          padding-top: 8px;
          border-top: 1px solid #333;
        }

        .prompt-preview {
          color: #888 !important;
          font-size: 9px !important;
          font-style: italic !important;
          line-height: 1.3 !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* 空状态 */
        .empty-result {
          padding: 80px 0;
          text-align: center;
        }

        .empty-content {
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .empty-title {
          color: #fff !important;
          font-size: 16px !important;
          font-weight: 500 !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .empty-subtitle {
          color: #888 !important;
          font-size: 13px !important;
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        /* 搜索输入框样式 */
        .custom-search-input {
          .ant-input-group {
            display: flex !important;
            align-items: stretch !important;
          }
          
          .ant-input-affix-wrapper {
            background: #1a1a1a !important;
            border: 1px solid #333 !important;
            border-right: none !important;
            border-radius: 16px 0 0 16px !important;
            height: 56px !important;
            flex: 1 !important;
            
            &:hover,
            &:focus,
            &.ant-input-affix-wrapper-focused {
              border-color: #00ff00 !important;
              box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
            }
          }
          
          .ant-input {
            background: transparent !important;
            border: none !important;
            color: #fff !important;
            font-size: 16px !important;
            height: 100% !important;
            padding: 16px 20px !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            
            &::placeholder {
              color: #888 !important;
            }
            
            &:focus {
              box-shadow: none !important;
            }
          }
          
          .ant-input-prefix {
            margin-right: 12px !important;
          }
          
          .search-icon-left {
            color: #00ff00 !important;
            font-size: 20px !important;
          }
          
          .ant-input-group-addon {
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
          }
          
          .ant-btn {
            background: linear-gradient(135deg, #00ff00, #00cc00) !important;
            border: 1px solid #00ff00 !important;
            border-left: none !important;
            color: #000000 !important;
            border-radius: 0 16px 16px 0 !important;
            height: 56px !important;
            font-weight: 500 !important;
            font-size: 16px !important;
            padding: 0 32px !important;
            transition: all 0.3s ease !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            
            &:hover {
              background: linear-gradient(135deg, #00cc00, #009900) !important;
              border-color: #00cc00 !important;
              transform: translateY(-1px) !important;
              box-shadow: 0 4px 12px rgba(0, 255, 0, 0.3) !important;
            }
            
            &:active {
              transform: translateY(0) !important;
            }
          }
        }

      `}</style>
    </AdminLayout>
  );
};

export default PromptPlaza;